<template>
  <div class="course-list">
    <div class="page-header">
      <h2>学习管理</h2>
      <el-button type="primary">
        <el-icon><Plus /></el-icon>
        添加课程
      </el-button>
    </div>
    
    <el-card>
      <div class="course-grid">
        <div v-if="courses.length === 0" class="empty-state">
          <el-icon class="empty-icon"><School /></el-icon>
          <p>暂无学习课程</p>
          <el-button type="primary">开始学习</el-button>
        </div>
        
        <div v-else>
          <div
            v-for="course in courses"
            :key="course.id"
            class="course-item"
          >
            <h4>{{ course.title }}</h4>
            <p>{{ course.description }}</p>
            <el-progress :percentage="course.progress" />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus, School } from '@element-plus/icons-vue'

const courses = ref([])
</script>

<style scoped lang="scss">
.course-list {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  
  .empty-icon {
    font-size: 64px;
    color: var(--el-text-color-placeholder);
    margin-bottom: 20px;
  }
}

.course-item {
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  
  h4 {
    margin: 0 0 10px 0;
  }
  
  p {
    margin: 0 0 10px 0;
    color: var(--el-text-color-regular);
  }
}
</style>